<template>
  <div class="notification-list-container">
    <ul class="notification-list" :style="{ animationDuration: animationDuration }">
      <li v-for="(item, index) in displayList" :key="`${item.id}-${index}`" class="notification-item">
        <span class="type-tag" :class="`type-${tagMapping[item.type]}`">{{ item.type }}</span>
        <span class="title">{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  notifications: {
    type: Array,
    required: true,
    default: () => []
  }
});

// For seamless looping, duplicate the list if it's long enough to need scrolling
const displayList = computed(() => {
  if (props.notifications.length > 4) { 
      return [...props.notifications, ...props.notifications];
  }
  return props.notifications;
});

const animationDuration = computed(() => {
    // Adjust speed based on number of items, e.g., 4 seconds per item
    const speed = 4;
    return `${props.notifications.length * speed}s`;
});

const tagMapping = {
    '园区公告': 'info',
    '活动推广': 'promo',
    '新闻资讯': 'service'
};
</script>

<style scoped>
.notification-list-container {
  height: 100%;
  overflow: hidden;
}

.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-list-container:hover .notification-list {
    animation-play-state: paused;
}

/* Only apply animation if the list is duplicated (and thus, scrollable) */
.notification-list:has(.notification-item:nth-child(5)) {
    animation: scrollUp linear infinite;
}

@keyframes scrollUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  border-bottom: 1px solid rgba(0, 162, 255, 0.1);
  color: #aed4ff;
}

.type-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 15px;
  flex-shrink: 0;
  font-weight: bold;
}

.type-info {
  background-color: rgba(0, 229, 255, 0.2);
  color: #00e5ff;
}
.type-promo {
  background-color: rgba(255, 197, 61, 0.2);
  color: #ffc53d;
}
.type-service {
  background-color: rgba(170, 0, 255, 0.2);
  color: #aa00ff;
}

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style> 